<template>
  <div>
    <div id="box">
      <van-sticky>
        <van-nav-bar
          v-show="$route?.meta?.isShowNavBar"
          :title="$route?.meta?.title || '无忧购'"
          :left-arrow="$route.meta.isShowBackIcon"
          @click-left="$router.back()"
        />
      </van-sticky>

      <router-view
        :class="$route.meta.isShowTabBar ? 'preventcover' : ''"
      ></router-view>
      <van-tabbar
        v-model="active"
        active-color="orange"
        route
        v-show="$route.meta.isShowTabBar"
      >
        <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
        <van-tabbar-item icon="qr" to="/classify">分类</van-tabbar-item>
        <van-tabbar-item
          icon="shopping-cart-o"
          to="/shopcar"
          :badge="shopStore.totalNum ? shopStore.totalNum : 0"
          >购物车</van-tabbar-item
        >
        <van-tabbar-item icon="friends-o" to="/user">个人中心</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import useShopStore from "@/store/shop";
const shopStore = useShopStore();
const active = ref(0);
const online = ref(navigator.onLine);

const totalNum = ref(0);

const updateOnlineStatu = (event) => {
  if (event.type === "offline") {
    this.$toast({
      message: "请检查网络",
    });
  }
  online.value = event.type === "online" ? true : false;
};
onMounted(() => {
  window.addEventListener("online", updateOnlineStatu);
  window.addEventListener("offline", updateOnlineStatu);
});
onBeforeUnmount(() => {
  window.removeEventListener("online", updateOnlineStatu);
  window.removeEventListener("offline", updateOnlineStatu);
});
</script>

<style lang="scss" scoped>
.preventcover {
  padding-bottom: 50px;
}
#box {
  .van-nav-bar .van-icon {
    color: orange;
  }
}

// 自定义进度条颜色
#nprogress .bar {
  background: orange !important; //自定义颜色
}
// 滚动条样式
::-webkit-scrollbar {
  width: 0;
}
</style>